<template>
  <view class="about-container">

    <!-- 应用图标和名称 -->
    <view class="app-info">
      <image class="app-logo" src="/static/images/mascot.png"></image>
      <text class="app-name">小舟报</text>
    </view>

    <!-- 信息列表 -->
    <view class="info-list">
      <view class="info-item" @tap="checkUpdate">
        <text>当前版本</text>
        <view class="right-content">
          <text>1.2.1</text>
          <text class="arrow">></text>
        </view>
      </view>

      <view class="info-item">
        <text>用户ID</text>
        <view class="right-content">
          <text>{{userId}}</text>
          <text class="arrow">></text>
        </view>
      </view>

      <view class="info-item" @tap="contactUs">
        <text>联系我们</text>
        <text class="arrow">></text>
      </view>

      <view class="info-item" @tap="goToPrivacy">
        <text>隐私政策</text>
        <text class="arrow">></text>
      </view>

      <view class="info-item" @tap="goToUserGuide">
        <text>使用条例</text>
        <text class="arrow">></text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userId: '231654654',
      version: '1.2.1'
    }
  },
  methods: {
    handleBack() {
      uni.navigateBack()
    },
    checkUpdate() {
      // 检查更新逻辑
      uni.showToast({
        title: '当前已是最新版本',
        icon: 'none'
      })
    },
    contactUs() {
      // 跳转到联系我们页面
      uni.navigateTo({
        url: '/pages/contact/contact'
      })
    },
    goToPrivacy() {
      // 跳转到隐私政策页面
      uni.navigateTo({
        url: '/pages/privacy/privacy'
      })
    },
    goToUserGuide() {
      // 跳转到使用条例页面
      uni.navigateTo({
        url: '/pages/guide/guide'
      })
    }
  }
}
</script>

<style lang="scss">
.about-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  font-weight: bold;
  
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    height: 44px;
    background-color: #fff;
    
    .title {
      font-size: 17px;
      font-weight: 500;
    }
    
    .right-icons {
      display: flex;
      gap: 15px;
    }
  }

  .app-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 0;
    background-color: #fff;
    
    .app-logo {
      width: 80px;
      height: 80px;
      border-radius: 16px;
    }
    
    .app-name {
      margin-top: 15px;
      font-size: 18px;
      font-weight: 500;
    }
  }

  .info-list {
    margin-top: 10px;
    background-color: #fff;
    
    .info-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px;
      border-bottom: 1px solid #eee;
      
      .right-content {
        display: flex;
        align-items: center;
        color: #999;
        
        .arrow {
          margin-left: 5px;
        }
      }
    }
  }
}
</style>